import React, { Component } from "react";
import { Animated } from "react-native";
import View = Animated.View;

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 试试去掉父 View 中的 flex：1
      // 则父 View 不再具有尺寸，因此子组件也无法撑开
      // 然后再用 height：300，来代替试试。
      <View style={{ height: 300, width: 300 }}>
        <View style={{ flex: 1, backgroundColor: "powderblue" }} />
        <View style={{ flex: 2, backgroundColor: "skyblue" }} />
        <View style={{ flex: 3, backgroundColor: "steelblue" }} />
      </View>
    );
  }
}
